<template>
  <layout-body>
    <!-- 列表 -->
    <el-table
      class="mt20"
      v-loading="initLoading"
      :data="commentList"
      row-key="id"
    >
      <el-table-column label="商品信息" prop="label_name">
        <template #default="scope">
          <div class="flex">
            <el-avatar
              shape="square"
              :size="60"
              :src="scope.row.goods.goods_image"
            ></el-avatar>
            <div class="ml10">
              <div class="te2">
                {{ scope.row.goods.goods_name }}
              </div>
              <div class="mt5">
                <span class="text-grey">规格:</span>
                <span>{{ scope.row.goods.sku_attr_text }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户" prop="label_name">
        <template #default="scope">
          <userBox
            :avatar="scope.row.user_avatar"
            :nickName="scope.row.user_nickName"
            :id="scope.row.user_id"
          ></userBox>
        </template>
      </el-table-column>
      <el-table-column label="评分" prop="rate" align="center">
        <template #default="scope">
          <span :class="`text-${scope.row.rate.color}`">{{
            scope.row.rate.name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评价内容" prop="content">
        <template #default="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评价时间" prop="create_time">
        <template #default="scope">
          <span class="text-grey fz12">{{ scope.row.create_time }}</span>
        </template></el-table-column
      >
      <el-table-column align="left" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="toOrderDetail(scope.row.order_id)"
            v-permission="'store-order-detail'"
            >订单详细</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex end">
      <page :listPage="listPage" @change="pageChange"></page>
    </div>
    <orderDetail ref="orderDetailRef"></orderDetail>
  </layout-body>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { getGoodsCommentList } from "@/api/store/goods_comment";
import { listPageType, Result, ResultError } from "@/types";
import userBox from "@/components/user/box.vue";
import orderDetail from "@/views/store/order/detail.vue";
import { useConfig } from "@/store";
const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const commentList = ref<any>([]);

const toInit = () => {
  let obj: any = {};
  obj.page = listPage.value.page;
  obj.limit = listPage.value.limit;
  initLoading.value = true;
  getGoodsCommentList(obj)
    .then((res: Result) => {
      commentList.value = res.data.data;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

onMounted(() => {
  toInit();
});

const orderDetailRef = ref<HTMLElement>();

const toOrderDetail = (id: number) => {
  proxy?.$refs["orderDetailRef"].open(id);
};
</script>